import Vue from 'vue'
//测试案例用
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

//按钮权限，自定义指令
Vue.directive('has',{
  inserted(el,bindings,vnode){
    //因为v-has="'edit'" 是字符串值，所以可以用value
    let permission = bindings.value;
    let r = vnode.context.$store.state.btnPermission[permission];
    !r && el.parentNode.removeChild(el);//元素找到父节点删除子节点传入元素
  }
})
//路由钩子，筛选路由并添加
router.beforeEach(async (from,to,next)=>{
  if(!store.state.hasPermission){
    //没有就从后台拉取权限
    let needRoutes = await store.dispatch('getAuthRouter'); //获取权限路由
    // router.addRoutes(needRoutes)不让用
    // 这里添加路由之后，路由不会立即生效，而是下次才生效
    needRoutes.forEach(item=>{
      router.addRoute(item)
    })
    //刚添加好路由就访问他
    //next如果传入的是一个对象,{path:/}会跳转到路径上
    console.log(1)
    next({...to,replace:true}); // 不记录历史 replaceState
  }else{
    console.log(2)
    next();
  }
})

new Vue({
  router,
  store,//使用自己写的vue-router时不要开启
  render: h => h(App)
}).$mount('#app')
